<template>
  <view class="select-wrap">
    <view class="flex justify-between items-center mx-[20rpx] py-4 text-sm">
      <text class="text-[#9a9a9a]" @click="emit('close')">取消</text>
      <text class="text-base  font-bold">选择银行卡</text>
      <text class="text-primary" @click="handleconfirm">确认</text>
    </view>
    <scroll-view :scrollY="true" class="flex-1">
      <view class=" flex items-center px-4 py-2 border-b border-b-solid border-[#EDEDED]" v-for="item in 10" :key="item"
        @click="handleRadioChange(item)">
        <view class="text-sm flex-1">
          <view class="text-base">{{ item }}</view>
          <view class="text-xs mt-1">卡号：{{ item }}</view>
        </view>
        <wd-radio-group v-model="value" shape="dot" inline @change="handleRadioChange">
          <wd-radio :value="item" shape="dot"></wd-radio>
        </wd-radio-group>
      </view>
    </scroll-view>

    <view class="bg-white ">
      <wd-button :round="false" :block="true" customClass="w-full">新增银行卡</wd-button>
    </view>

  </view>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: [String, Number],
    required: true
  }
});
const emit = defineEmits(["update:modelValue", 'close']);

const value = ref(props.modelValue);

watch(() => props.modelValue, () => {
  value.value = props.modelValue
});

function handleconfirm() {
  emit("update:modelValue", 0);
  emit('close')
}

function handleRadioChange(v) {
  value.value = v;
}

</script>

<style lang="scss" scoped>
.select-wrap {
  @apply h-full flex flex-col;
  padding-bottom: var(--wot-button-medium-height);
}
</style>
